<template>
  <div class="activelist">
    <div class="activelist-wrapper">
      <ul>
        <li class="activelist-content border-1px" v-for="(item,$index) in activeArray" :key="$index">
          <div class="notice-img">
            <img width="100%" height="100%" :src="item.img">
          </div>
          <div class="activelist-message">
            <div class="left">
              <h1 class="title">{{item.title}}</h1>
              <p class="time">活动时间： {{item.start_time | formatTime}} ~ {{item.end_time | formatTime}}</p>
            </div>
            <time-btn :text=btnText></time-btn>
          </div>
        </li>
      </ul>
      <div class="nomore-wrapper" v-if="noMoreActive">
        <div class="nomore-img">
          <img width="100%" height="100%" src="../../../assets/img/nomore@2x.png">
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import timeBtn from '../../common/time-btn/time-btn'

  export default {
    data() {
      return {
        activeArray: [],
        btnText: {},
        noMoreActive: false
      }
    },
    props: {
      loadUrl: {
        type: String
      }
    },
    methods: {
      getData() {
        this.$http.get(this.loadUrl).then((response) => {
          if (response.data.code === this.ERROR_OK) {
            this.activeArray = response.data.data
            for (let i = 0; i < this.activeArray.length; i++) {
              if (this.activeArray[i].type === 0) {
                this.btnText = {name: '未开始', type: 0}
              } else if (this.activeArray[i].type === 1) {
                this.btnText = {name: '进行中', type: 1}
              } else {
                this.btnText = {name: '已结束', type: 2}
              }
            }
            if (response.data.total === '0') {
              this.noMoreActive = true
            }
          }
        })
      }
    },
    filters: {
      formatTime(value) {
        value = value.replace(/-/g, '/')
        let year = new Date(value).getFullYear()
        let month = new Date(value).getMonth() + 1
        let day = new Date(value).getDate()
        let date = `${year}-${month}-${day}`
        return date
      }
    },
    created() {
      this.getData()
    },
    components: {
      timeBtn
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../assets/stylus/mixin.styl"
  .activelist
    padding 0 32px

  .activelist-wrapper
    position relative
    .nomore-wrapper
      width 100%
      height 100%
      .nomore-img
        margin 100px auto 100px auto
        width 329px
        height 308px
        img
          border-radius 0
  .activelist-content
    display flex
    flex-direction column
    border-1px(rgba(0, 0, 0, 0.2))
    &:last-child
      border-none()
    padding-top 24px
    .notice-img
      width 100%
      height 200px
    .activelist-message
      display inline-flex
      margin 24px 0
      .left
        width 540px
      .title
        font-size 32px
        color #333
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
      .time
        margin-top 8px
        font-size 24px
        color #999
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
</style>
